<template>
  <div class="Usermain">
    <div class="tab">
      <!-- 个人信息 -->
      <div>
        <ul class="list">
          <li class="header">个人中心</li>
          <li class="son" :class="{active:Index===0}" @click="toEdit()">
          <i class="iconfont">&#xe61b;</i>  个人信息
          </li>
          <li class="son" :class="{active:Index===1}" @click="changePassword()">
          <i class="iconfont">&#xeae6;</i>  修改密码
          </li>
        </ul>
      </div>
      <!-- 增高 -->
      <div class="foot">
      </div>
    </div>

    <!-- 视图区域 -->
    <router-view></router-view>
  </div>

</template>
<script>
export default {
  name: 'usermain-vue',
  data: function () {
    return {
      // 记录高亮
      Index: 0
    }
  },
  methods: {
    toEdit () {
      this.Index = 0
      this.$router.push('/user/profile')
    },
    changePassword () {
      this.Index = 1
      this.$router.push('/user/password')
    }
  },
  components: {
  }
}
</script>
<style scoped lang="less">
.Usermain{
  width: 80%;
  height: 80%;
  margin:0 auto;
  display: flex;
  .tab{
    width: 30%;
    height: 100%;
    background: white;
  }
  .main{
    margin-left: 20px;
    width: 100%;
    height: 100%;
    background: white;
  }
}

.list{
  margin: 0 auto;
  width: 200px;
  li{
    height: 40px;
    line-height: 40px;
    list-style: none;
    margin-top: 10px;
  }
  .header{
    text-align: center;
    color: #1a1a1a;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
    font-family: '钉钉进步体';
  }
  .son{
    font-size: 16px;
    cursor: pointer;
    text-indent: 20%;
  }
  .active{
    color: #ededed;
    background-color: #3e87e5;
  }
}
.foot{
  width: 100%;
  height: 500px;
}
</style>
